<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>教师管理</title>
    <link rel="stylesheet" href="../../plugins/element-ui/index.css"/>
</head>
<body>
<style>
    .el-input__inner {
        width: 150px;
    }
</style>
<div id="app">
    <el-tabs type="border-card">
        <el-tab-pane>
            <span slot="label" @click="teacherManage()">教师管理</span>
            <div>
                <span style="font-size: 13px"> 认证年份:</span>
                <template>
                    <el-select v-model="teacherConditions.stateTime" filterable placeholder="请选择" size="mini">
                        <el-option v-for="item in goStateTimes" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                </template>
                <span style="font-size: 13px"> 院系名称:</span>
                <template>
                    <el-select v-model="teacherConditions.deptId" filterable placeholder="请选择" size="mini">
                        <el-option v-for="item in depts" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                </template>
                <span style="font-size: 13px"> 性别:</span>
                <template>
                    <el-select v-model="teacherConditions.sex" filterable placeholder="请选择" size="mini">
                        <el-option v-for="item in chooseGender" :key="item.value" :label="item.label"
                                   :value="item.value">
                        </el-option>
                    </el-select>
                </template>
                <span style="font-size: 13px"> 姓名:</span>
                <input type="text" v-model="teacherConditions.name" name="name"
                       style="-webkit-appearance: none;background: #FFF;border-radius: 4px;border: 1px solid #DCDFE6;
                        box-sizing: border-box;color: #606266;display: inline-block;font-size: inherit;height: 28px;line-height: 35px;
                        outline: 0;padding: 0 15px;width: 150px"
                >
                <el-button type="primary" size="mini" @click="teacherCertificationInquiry()">查询</el-button>
                <el-button size="mini" @click="manageReset()">重置</el-button>
                <span style="margin-left: 100px">
       <el-button
               type="danger"
               @click="deleteHandleManage()"
               :disabled="dataListSelectionsManage.length <= 0"
               size="mini">批量删除</el-button>
        <el-button type="primary" size="mini">导出</el-button>
    </span>
            </div>
            <!--   tid:1,
                   schoolName:'schoolName',
                   deptName: 'deptName',
                   jobNumber: 'jobNumber',
                   name: 'name',
                   sex: 'sex',
                   phone: 'phone',
                   state: 'state',
                   stateTime: 'stateTime'-->
            <el-table
                    :data="tableDataManage.list"
                    v-loading="dataListLoadingManage"
                    @selection-change="selectionChangeHandleManage"
                    style="width: 100%">
                <el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>
                <el-table-column
                        label="学校名称"
                        prop="schoolName">
                </el-table-column>
                <el-table-column
                        label="院系机构"
                        prop="deptName">
                </el-table-column>
                <el-table-column
                        label="工号"
                        prop="jobNumber">
                </el-table-column>
                <el-table-column
                        label="姓名"
                        prop="tname">
                </el-table-column>
                <el-table-column
                        label="性别"
                >
                    <template slot-scope="scope">
                        <div slot="reference" class="name-wrapper" v-if="scope.row.sex == 1">
                            <el-tag size="medium">男</el-tag>
                        </div>
                        <div slot="reference" class="name-wrapper" v-if="scope.row.sex == 0">
                            <el-tag size="medium">女</el-tag>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column
                        label="手机号码"
                        prop="phone">
                </el-table-column>
                <el-table-column
                        label="认证状态"
                        >
                    <template slot-scope="scope">
                            <div slot="reference" class="name-wrapper" v-if="scope.row.state == 1">
                                <el-tag size="medium">认证</el-tag>
                            </div>
                            <div slot="reference" class="name-wrapper" v-if="scope.row.state == 0">
                                <el-tag size="medium">未认证</el-tag>
                            </div>
                    </template>
                </el-table-column>
                <el-table-column
                        label="认证时间"
                        prop="stateTime">
                </el-table-column>
                <el-table-column
                        label="操作"
                        align="center">
                    <template slot-scope="scope">
                        <el-button
                                size="mini"
                                @click="deleteHandleManage(scope.row.tid)">删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 分页 -->
            <div class="block">
                <span class="demonstration"></span>
                <el-pagination
                        @size-change="handleSizeChangeManage"
                        @current-change="handleCurrentChangeManage"
                        :current-page="tableDataManage.currentPage"
                        :page-sizes="[10, 20, 30, 40]"
                        :page-size="tableDataManage.pageCount"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="tableDataManage.totalCount">
                </el-pagination>
            </div>
        </el-tab-pane>


        <el-tab-pane>
            <span slot="label" @click="teacherState()">教师认证</span>
            <div>
                <span style="font-size: 13px"> 认证年份:</span>
                <template>
                    <el-select v-model="teacherConditions.stateTime" filterable placeholder="请选择" size="mini">
                        <el-option v-for="item in goStateTimes" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                </template>
                <span style="font-size: 13px"> 院系名称:</span>
                <template>
                    <el-select v-model="teacherConditions.deptId" filterable placeholder="请选择" size="mini">
                        <el-option v-for="item in depts" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                </template>
                <span style="font-size: 13px"> 性别:</span>
                <template>
                    <el-select v-model="teacherConditions.sex" filterable placeholder="请选择" size="mini">
                        <el-option v-for="item in chooseGender" :key="item.value" :label="item.label"
                                   :value="item.value">
                        </el-option>
                    </el-select>
                </template>
                <span style="font-size: 13px"> 姓名:</span>
                <input type="text" v-model="teacherConditions.tname" name="name"
                       style="-webkit-appearance: none;background: #FFF;border-radius: 4px;border: 1px solid #DCDFE6;
            box-sizing: border-box;color: #606266;display: inline-block;font-size: inherit;height: 28px;line-height: 35px;
            outline: 0;padding: 0 15px;width: 150px"
                >
                <el-button type="primary" size="mini" @click="teacherCertificationInquiry()">查询</el-button>
                <el-button size="mini" @click="manageReset()">重置</el-button>
                <span style="margin-left: 100px">
       <el-button
               type="danger"
               @click="deleteHandleCertification()"
               :disabled="dataListSelectionsCertification.length <= 0"
               size="mini">批量删除</el-button>
        <el-button type="primary" size="mini">导出</el-button>
    </span>
            </div>
            <!--   tid:1,
                                     schoolName:'schoolName',
                                     deptName: 'deptName',
                                     jobNumber: 'jobNumber',
                                     name: 'name',
                                     sex: 'sex',
                                     phone: 'phone',
                                     state: 'state',
                                     stateTime: 'stateTime'-->
            <el-table
                    :data="tableDataManage.list"
                    v-loading="dataListLoadingCertification"
                    @selection-change="selectionChangeHandleCertification"
                    style="width: 100%">
                <el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>
                <el-table-column
                        label="学校名称"
                        prop="schoolName">
                </el-table-column>
                <el-table-column
                        label="院系机构"
                        prop="deptName">
                </el-table-column>
                <el-table-column
                        label="工号"
                        prop="jobNumber">
                </el-table-column>
                <el-table-column
                        label="姓名"
                        prop="tname">
                </el-table-column>
                <el-table-column
                        label="性别"
                        prop="sex">
                    <template slot-scope="scope">
                        <div slot="reference" class="name-wrapper" v-if="scope.row.sex == 1">
                            <el-tag size="medium">男</el-tag>
                        </div>
                        <div slot="reference" class="name-wrapper" v-if="scope.row.sex == 0">
                            <el-tag size="medium">女</el-tag>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column
                        label="手机号码"
                        prop="phone">
                </el-table-column>
                <el-table-column
                        label="认证状态"
                >
                    <template slot-scope="scope">
                        <div slot="reference" class="name-wrapper" v-if="scope.row.state == 1">
                            <el-tag size="medium">认证</el-tag>
                        </div>
                        <div slot="reference" class="name-wrapper" v-if="scope.row.state == 0">
                            <el-tag size="medium">未认证</el-tag>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column
                        label="认证时间"
                        prop="stateTime">
                </el-table-column>
                <el-table-column
                        label="操作"
                        align="center">
                    <template slot-scope="scope">
                        <el-button
                                size="mini"
                                @click="deleteHandleCertification(scope.row.tid)">删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 分页 -->
            <div class="block">
                <span class="demonstration"></span>
                <el-pagination
                        @size-change="handleSizeChangeManage"
                        @current-change="handleCurrentChangeManage"
                        :current-page="tableDataManage.currentPage"
                        :page-sizes="[10, 20, 30, 40]"
                        :page-size="tableDataManage.pageCount"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="tableDataManage.totalCount">
                </el-pagination>
            </div>
        </el-tab-pane>
    </el-tabs>
</div>
</body>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="../../plugins/vue/vue.js"></script>
<!-- 引入组件库 -->
<script src="../../plugins/element-ui/index.js"></script>
<!-- 引入axios -->
<script src="../../plugins/axios/axios.min.js"></script>

<script src="../../js/request.js"></script>

<script src="../../api/teacher.js"></script>
<script>
    new Vue({
        el: "#app",
        data() {
            return {
                /*
                  * 教师认证  院系机构
                  * */
                depts: [
                    {value: '1', label: '信息工程'},
                    {value: '2', label: '护理系'},
                ],
                /*
                * 认证年份
                * */
                goStateTimes: [

                ],
                /*
                * 选择性别
                * label  显示
                * value  值
                * */
                chooseGender: [
                    {value: '1', label: '男'},
                    {value: '2', label: '女'},
                ],
               /*
               * 教师提交条件json
               * */
                teacherConditions: {
                    stateTime: '',
                    deptId: '',
                    sex: '',
                    tname: '',
                    state: 1
                },
                /*
                * 教师管理/认证遍历数组
                * */
                tableDataManage : {
                    // 数据
                    list:[
                            {
                                tid: 1,
                                schoolName: 'schoolName',
                                deptName: 'deptName',
                                jobNumber: 'jobNumber',
                                tname: 'name',
                                sex: 'sex',
                                phone: 'phone',
                                state: 0,
                                stateTime: 'stateTime'
                            }
                        ],
                    // 分页数据
                    currentPage: 1,
                    pageCount: 10,
                    totalCount: 0
                },
                dataListLoadingManage: false,
                /*
                * 教师管理删除数组
                * */
                dataListSelectionsManage: [],
                dataListLoadingCertification: false,
                dataListSelectionsCertification: [],

            };
        },
        mounted(){
            console.log("===============")
            this.getSearchTeacherInfo();
        },
        methods: {
            //获取搜索框信息
            getSearchTeacherInfo(){
                getSearchInfo().then((response)=>{
                    console.log("获取搜索条件")
                    console.log(response)
                    this.depts = response.data.data.depts;
                    this.goStateTimes = response.data.data.goStateTimes;
                })
            },
            // 教师认证 切换导航
            teacherState(){
                console.log("教师认证切换")
                this.tableDataManage.currentPage = 1;
                this.teacherConditions.state = 0;
                this.manageQueries();
            },
            /*
            *  教师管理 切换导航
            * */
            teacherManage() {
                console.log("教师管理切换")
                this.tableDataManage.currentPage = 1;
                this.teacherConditions.state = 1;
                this.manageQueries();
            },
            // 分页
            handleSizeChangeManage(val) {
                console.log(`每页 ${val} 条`);
                this.tableDataManage.pageCount = val;
            },
            handleCurrentChangeManage(val) {
                console.log(`当前页: ${val}`);
                this.tableDataManage.currentPage = val;
                this.manageQueries();
            },
            /*
            * 教师管理重置
            * */
            manageReset() {
                this.teacherConditions = {
                    stateTime: '',
                    deptName: '',
                    sex: '',
                    name: ''
                }
                this.manageQueries();
            },
            /*
             * 教师管理查询按钮
            * */
            manageQueries() {
                console.log("分页查询")
                let page = {
                    "currentPage" : this.tableDataManage.currentPage,
                    "pageCount" : this.tableDataManage.pageCount
                };
                getMessagePage(page,this.teacherConditions).then((response) => {
                    this.tableDataManage = response.data.data.page;
                })

            },
            //教师管理 多选
            selectionChangeHandleManage(val) {
                this.dataListSelectionsManage = val;
            },
            // 教师管理 删除
            deleteHandleManage(id) {
                console.log(id)
                var ids = id
                    ? [id]
                    : this.dataListSelectionsManage.map(item => {
                        return item.brandId;
                    });
                this.$confirm(
                    `确定对[id=${ids.join(",")}]进行[${id ? "删除" : "批量删除"}]操作?`,
                    "提示",
                    {
                        confirmButtonText: "确定",
                        cancelButtonText: "取消",
                        type: "warning"
                    }
                ).then(() => {
                    console.log(ids)
                    //发送请求
                });
            },
            /*
            * 教师认证重置
            * */
            teacherCertificati() {
                this.teacherConditions = {
                    stateTime: '',
                    deptName: '',
                    sex: '',
                    name: ''
                }
                this.tableDataManage = {
                    currentPage: 1,
                    pageCount: 10,
                    totalCount: 0
                }
                this.teacherCertificationInquiry()
            },
            /*
            * 教师认证查询按钮
           * */
            teacherCertificationInquiry() {
                console.log(this.teacherConditions)
                this.manageQueries()
            },
            // 教师认证多选
            selectionChangeHandleCertification(val) {
                this.dataListSelectionsCertification = val;
            },
            // 教师认证删除
            deleteHandleCertification(id) {
                console.log(id)
                var ids = id
                    ? [id]
                    : this.dataListSelectionsCertification.map(item => {
                        return item.brandId;
                    });
                this.$confirm(
                    `确定对[id=${ids.join(",")}]进行[${id ? "删除" : "批量删除"}]操作?`,
                    "提示",
                    {
                        confirmButtonText: "确定",
                        cancelButtonText: "取消",
                        type: "warning"
                    }
                ).then(() => {
                    console.log(ids)
                    //发送请求
                });
            }
        },
        created() {
            console.log("开始");
            this.manageQueries();
        },

    })
</script>
</html>